<template>
	<view>
		<u-popup  v-model="menpopshow" mode="bottom" width="100%" ref="auth" :closeable="true" :mask-close-able="true" :custom="true" :mask-click="false" @close="closemenpop">
            <view class="popone">
                <text class="xuantit">
                    选择消费门店 {{tlist.length||0}}家门店可用
                </text>
                <scroll-view class="menlist" scroll-y>
                    <view class="menitem" v-for="(item,index) in tlist" :key="index" @click.stop="getshop(item,index)">
                        <view class="menone">
                            <view class="menhead">
                                <text class="name">{{item.name}}</text>
                            </view>
                            <view class="menhead">
                                <text class="yingye">{{item.work_status}}</text>
                                <text class="yingtime">{{item.time}}</text>
                            </view>
                            <view class="menhead">
                                <image class="icon_dw" src="@/pages_client/static/img/icon_dw.png" />
                                <text class="ju">{{item.distance}}</text>
                                <text class="juli txt">{{item.address}}</text>
                            </view>
                        </view>
                        <image class="icon_dz_xz_s" v-if="popitem.id==item.id" src="/static/img/icon_dz_xz_s.png" />
                        <image class="icon_dz_xz_s" v-else src="/static/img/icon_dz_xz_n.png" />
                    </view>
                </scroll-view>
                <view class="menbot">
                    <view class="mbots" @click="getxuanmen">确认选择</view>
                </view>
            </view>
        </u-popup>
	</view>
</template>

<script>
	export default {
		name: 'MenOrderPop',
		props: {
			menpopshow: {
				type: Boolean,
				default: false
			},
            tlist:{
                type: Array,
				default:[]
            },
            // longitude:{
            //     type: String,
			// 	default:''
            // },
            // latitude:{
            //     type: String,
			// 	default:''
            // }

		},
		data() {
			return {
                check:true,
                imagePath: '', // 用于存储生成的图片路径:
                popitem:''
			};
		},
		created() {
            console.log(this.tlist)
            if(!this.popitem||this.popitem==''){
                this.popitem = this.tlist[0]
            }
            console.log(this.popitem)
			
		},
		mounted() {
            
		},
		methods: {
            closemenpop(){
                this.$emit("closemenpop")
            },
            getxuanmen(){
                if(!this.popitem||this.popitem==''){
                    this.$u.toast("请选择店铺");
                    return;
                }
                this.$emit("getxuanmen",this.popitem)
            },
            getshop(item,index){
                this.popitem = item
                let tlist = this.tlist
                for(let i in tlist){
                    tlist[i].isselect = false
                }
                tlist[index].isselect = true
                this.tlist = tlist
            }

		}
	};
</script>

<style lang="scss" scoped>
    /deep/.u-mode-center-box{
        background-color: transparent;
    }
	.popone{
        width: 100%;
        background: #FFFFFF;
        padding: 30rpx;
        border-radius: 24rpx 24rpx 0rpx 0rpx;
        .xuantit{
            font-weight: bold;
            font-size: 30rpx;
            color: #272727;
            display: block;
            margin: 10rpx 0 30rpx;
        }
        .menlist{
            max-height: 600rpx;
            .menitem{
                display: flex;
                flex-direction: row;
                align-items: center;
                border-bottom: 1rpx solid #eee;
                padding: 14rpx 0;
                .menone{
                    display: flex;
                    flex-direction: column;
                    max-width: 90%;
                    .menhead{
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        margin-bottom: 15rpx;
                        .name{
                            font-weight: bold;
                            font-size: 32rpx;
                            color: #272727;
                        }
                        .yingye{
                            font-weight: 500;
                            font-size: 26rpx;
                            color: #24B924;
                        }
                        .yingtime{
                            font-weight: 500;
                            font-size: 26rpx;
                            color: #333333;
                            display: inline-block;
                            margin-left: 18rpx;
                        }
                        .icon_dw{
                            width:22rpx;
                            height: 24rpx;
                            margin-right: 8rpx;

                        }
                        .ju{
                            font-weight: 500;
                            font-size: 24rpx;
                            color: #999999;
                        }
                        .juli{
                            margin-left: 30rpx;
                            font-weight: 500;
                            font-size: 24rpx;
                            color: #999999;
                            display: inline-block;
                            max-width: 70%;
                        }
                    }
                }
            }
        }
        .icon_dz_xz_s{
            margin-left: auto;
            width: 40rpx;
            height: 40rpx;
        }
    }
    .menbot{
        height: 110rpx;
        background: #FFFFFF;
        display: flex;
        flex-direction: row;
        align-items: center;
        .mbots{
            height: 90rpx;
            background: #FF7C41;
            border-radius: 16rpx;
            width: 94%;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 500;
            font-size: 28rpx;
            color: #FFFFFF;
        }
    }
</style>
